<template>
	<view>
		<view class="fixed-top-content" :style="'background-image:' +'url('+vk.getStorageSync('my-load-image')+');no-repeat'">
			<view :style="'height:' + statusBarHeight + 'px'"></view>
			<view class="text-white w-100 text-center font-weight-bold font-34 line-height-88 box-border">我的</view>
			<view class="mt-5 pl-2 flex justify-between align-center" v-if="isLogin"
				@click="vk.navigateTo('/pages/user/setting/info')">
				<view class="flex flex-1 text-white">
					<u-image :src="vk.getVuex('$user.userInfo.avatar')" width="108" height="108" borderRadius="54"></u-image>
					<view class="flex flex-column justify-between ml-2 flex-1" style="padding: 12rpx 0 5rpx 0">
						<view class="flex align-center" style="max-width: 420rpx; height: 50rpx">
							<view style="
									line-height: 50rpx;
									font-size: 31rpx;
									font-weight: 500;
									max-width: 295rpx;
								" class="text-ellipsis">{{ vk.getVuex("$user.userInfo.nickname") }}</view>
							<view class="level-item-size">
								<view>{{ myVipCom }}</view>
								<!-- 	<image
									src="https://mp-6907ec39-2ab4-4507-8ad4-63259985c4df.cdn.bspapp.com/cloudstorage/ddea9425-35df-490c-bb71-9e0687b50e9c.png"
									style="width: 14rpx; height: 20rpx; margin-left: 2rpx"></image> -->
							</view>
						</view>
						<view style="font-size: 24rpx; line-height: 33rpx">我的邀请码：{{ vk.getVuex("$user.userInfo.my_invite_code") }}
						</view>
					</view>
				</view>
			</view>
			<view class="mt-5 pl-2 flex justify-between align-center" v-else @click="vk.navigateTo('/pages/login/login')">
				<view class="flex flex-1 text-white">
					<u-image src="/static/logo.png" width="132" height="132" borderRadius="66"></u-image>
					<view class="flex flex-column pb-1 ml-2 justify-between" style="height: 132rpx">
						<view class="flex flex-column justify-center flex-1 font-34">立即登录</view>
						<view class="font-24">登录享受更多权益～</view>
					</view>
				</view>
			</view>
		</view>
		<view :style="safeHeight > 20 ? 'margin-top: -80rpx; z-index: 999999' : 'margin-top: -110rpx; z-index: 999999'">
			<view class="bg-white mt-4 mx-2 rounded-20 flex align-center" style="padding: 10rpx 0">
				<u-grid :col="3" :border="false">
					<u-grid-item @click="pageTo('/pages/user/wallet/list')">
						<u-count-to bold font-size="34" null-val="-" :start-val="0"
							:end-val="vk.vuex.getters('$user/getUserBalanceStr')" :duration="1000" :decimals="2"></u-count-to>
						<view class="grid-text">{{ $t('mall.balance') }}</view>
					</u-grid-item>

					<u-grid-item @click="pageTo('/pages/user/coupon/list')">
						<u-count-to bold font-size="34" null-val="-" :start-val="0" :end-val="data.couponNum"
							:duration="1000"></u-count-to>
						<view class="grid-text">{{ $t('mall.coupon') }}</view>
					</u-grid-item>

					<u-grid-item @click="pageTo('/pages/user/integral/list')">
						<u-count-to bold font-size="34" null-val="-" :start-val="0"
							:end-val="vk.vuex.getters('$user/getUserIntegral')" :duration="1000"></u-count-to>
						<view class="grid-text">{{ $t('mall.integral') }}</view>
					</u-grid-item>

				</u-grid>
			</view>
			<view class="grid-btn">
				<vk-mall-grid-btn :localdata="grid1" @click="grid1.click"
					@subTitleClick="grid1.subTitleClick"></vk-mall-grid-btn>
			</view>
			<!-- <view class="m-2 rounded-13" @click="toNextPage('/pages/user/auth/invitation')">
				<image
					src="https://mp-6907ec39-2ab4-4507-8ad4-63259985c4df.cdn.bspapp.com/cloudstorage/02ff3158-77cb-4c9d-b6e5-5e6c71d871fa.png"
					mode="aspectFill" style="width: 100%; height: 169rpx"></image>
			</view> -->
			<view class="cell-btn">
				<vk-mall-cell-btn :localdata="cell1" @click="cell1.click"></vk-mall-cell-btn>
			</view>
			<!-- <view class="px-2 w-100" style="margin-top: 88rpx" v-if="isLogin">
				<view class="save-btn-main w-100 font-weight-bold"
					style="background-color: #fff; color: #333; border-radius: 20rpx" @click="logout_system">退出登录</view>
			</view> -->
		</view>
		<!-- #ifdef H5 -->
		<view style="height: 40rpx"></view>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view style="height: 80rpx"></view>
		<!-- #endif -->
		<u-popup v-model="logout_visible" mode="bottom" @close="logout_visible = false">
			<view class="flex align-center flex-column mx-2">
				<view class="logout_tips_con">是否确定退出登录？</view>
				<view class="confirm_logout_btn" @click="confirmLogout">确定</view>
				<view style="height: 20rpx"></view>
			</view>
		</u-popup>
		<u-popup v-model="service_mobile_visible" mode="bottom" @close="service_mobile_visible = false">
			<view class="flex align-center flex-column mx-2">
				<view class="logout_tips_con">平台联系电话：{{ service_mobile }}</view>
				<view class="confirm_logout_btn" @click="confirmCallPhone">确定</view>
				<view style="height: 20rpx"></view>
			</view>
		</u-popup>
	</view>
</template>


<script>
	let systemInfo = uni.getSystemInfoSync();
	var vk = uni.vk;
	import mysNavbar from "./components/mys-navbar"
	export default {
		components: {
			mysNavbar
		},
		data() {
			// 页面数据变量
			return {
				// init请求返回的数据
				data: {
					couponNum: "-"
				},
				// 表单请求数据
				form1: {},
				scrollTop: 0,

				statusBarHeight: systemInfo.statusBarHeight,
				safeHeight: systemInfo.safeArea.top,
				logout_visible: false,
				service_mobile_visible: false,
				grid1: {
					card: true,
					showHead: true,
					title: "我的订单",
					titleIcon: "vk-mall-icon-jilu",
					subTitle: "查看全部",
					col: 5,
					iconSize: 50,
					margin: "20rpx",
					list: [{
							title: "待付款",
							page: "/pages/user/order/list?status=0",
							color: "#e95d58",
							icon: "vk-mall-icon-daifukuan",
							num: 0
						},
						{
							title: "待发货",
							page: "/pages/user/order/list?status=1",
							color: "#e95d58",
							icon: "vk-mall-icon-daifahuo",
							num: 0
						},
						{
							title: "待收货",
							page: "/pages/user/order/list?status=2",
							color: "#e95d58",
							icon: "vk-mall-icon-wuliu",
							num: 0
						},
						{
							title: "待评价",
							page: "/pages/user/order/list?status=3",
							color: "#e95d58",
							icon: "vk-mall-icon-bianji1",
							num: 0
						},
						{
							title: "售后",
							page: "/pages/user/order/list?status=4",
							color: "#e95d58",
							icon: "vk-mall-icon-shouhou",
							num: 0
						},
					],
					click(e) {
						vk.navigateTo(e.page);
					},
					subTitleClick() {
						vk.navigateTo('/pages/user/order/list');
					}
				},
				cell1: {
					margin: "0 20rpx",
					borderRadius: "20rpx",
					list: [{
							title: "推广大使",
							icon: "vk-mall-icon-zuzhi",
							page: "/pages/salesman/index",
							value: "",
							show: false
						},
						// {
						// 	title: "我的会员卡",
						// 	icon: "vk-mall-icon-huiyuan",
						// 	page: "/pages/user/vip/vip"
						// },
						{
							title: "我的钱包",
							icon: "vk-mall-icon-jine",
							page: "/pages/user/wallet/wallet"
						},
						{
							title: "我的优惠券",
							icon: "vk-mall-icon-youhuiquan",
							page: "/pages/user/coupon/list"
						},
						{
							title: "我的积分",
							icon: "vk-mall-icon-jifen",
							page: "/pages/user/integral/list"
						},
						//{ title:"我的足迹", icon:"vk-mall-icon-daohang", page:"/pages/user/browsing/browsing" },
						{
							title: "我的收藏",
							icon: "vk-mall-icon-shoucang",
							page: "/pages/user/collect/collect"
						},
						{
							title: "收货地址",
							icon: "vk-mall-icon-ditu",
							page: "/pages/user/address/list"
						},
						{
							title: "联系客服",
							icon: "vk-mall-icon-kehu",
							page: "/pages/service-center/service-center"
						},
						{
							title: "设置",
							icon: "vk-mall-icon-shezhi",
							page: "/pages/user/setting/setting"
						}
					],
					click(e) {
						let url = e.page;
						if (url == "/pages/salesman/index") {
							if (!vk.getVuex("$user.userInfo.fx.is_fx")) {
								url = "/pages/salesman/apply-salesman";
							}
						}
						vk.navigateTo(url);
					},
				},
				vipCodeShow: false,
				isLogin: false,
				platform: ""
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			this.init(this.options);
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 监听 - 点击右上角转发时 https://uniapp.dcloud.io/api/plugins/share.html#onshareappmessage
		onShareAppMessage(options) {
			return vk.myfn.onShareAppMessage({
				options
			});
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				let that = this;
				that.platform = vk.pubfn.getPlatform();
				that.isLogin = vk.checkToken();
				if (that.isLogin) {
					let cellIndex = 0;
					that.cell1.list[cellIndex].show = true;
					vk.callFunction({
						url: 'client/user.getUserCenter',
						loading: true,
						data: {},
						success: (data) => {
							that.data = data;
							if (vk.pubfn.getData(data.userInfo, "fx.is_fx")) {
								that.cell1.list[cellIndex].title = "推广大使";
								that.cell1.list[cellIndex].value = "进入业务中心";
							} else {
								that.cell1.list[cellIndex].title = "我要成为推广大使";
								that.cell1.list[cellIndex].value = "分享商品拿佣金！";
							}
							if (data.vip.isUpgrade) {
								vk.alert(data.vip.msg, "VIP升级提醒", "好的");
							}

							that.grid1.list.map((item, index) => {
								item.num = data.groupArr[item.title];
							});
						}
					});
				}
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			openVipCode() {
				this.vipCodeShow = true;
			},
			login() {
				vk.navigateToLogin({
					mode: "navigateTo"
				});
			},
			// 设置微信昵称头像
			setWeixinUserInfo() {
				let that = this;
				// #ifdef MP-WEIXIN
				// 微信小程序
				try {
					vk.navigateTo('/pages/user/setting/info');
					// 此API已被微信官方废弃
					// uni.getUserProfile({
					// 	desc:"用于快速设置昵称头像",
					// 	success:(res) => {
					// 		let { userInfo } = res;
					// 		vk.userCenter.updateUser({
					// 			data:{
					// 				nickname : userInfo.nickName,
					// 				avatar : userInfo.avatarUrl,
					// 				gender : userInfo.gender
					// 			},
					// 			success:(data)=>{
					// 				vk.alert("设置成功");
					// 				// 再尝试绑定微信,不管成功失败,无需弹窗提示
					// 				vk.userCenter.bindWeixin({
					// 					loading: false,
					// 					needAlert: false
					// 				});
					// 			}
					// 		});
					// 	}
					// });
				} catch (err) {
					vk.alert("您的微信版本过低，请先更新微信!");
				}
				// #endif

				// #ifdef APP-PLUS
				// APP
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: (data) => {
								that.data = data;
								let {
									userInfo
								} = data;
								vk.userCenter.updateUser({
									data: {
										nickname: userInfo.nickName,
										avatar: userInfo.avatarUrl,
										gender: userInfo.gender
									},
									success: (data) => {
										vk.alert("设置成功");
									}
								});
							}
						});
					},
					fail: (res) => {
						console.log('res: ', res)
					}
				});
				// #endif


				// #ifdef H5
				vk.toast("h5环境不支持获取微信昵称");
				// #endif
			},
			scanCode() {
				// #ifdef H5
				vk.toast('H5不支持扫码');
				return false;
				// #endif
				// #ifdef MP-KUAISHOU
				vk.toast('快手小程序不支持扫码');
				return false;
				// #endif
				uni.scanCode({
					success: (res) => {
						let {
							result
						} = res;
						if (result) {
							// 订单核销码
							vk.navigateTo(`/pages/goods/goods-order-pay?_id=${result}`);
						}
					}
				})
			},
			logout_system() {
				this.logout_visible = true;
			},

			confirmLogout() {
				this.logout_visible = false;
				uni.pageScrollTo({
					scrollTop: 0,
				});
				vk.userCenter.logout({
					success: (data) => {
						this.isLogin = false;
					},
				});
			},
		},
		// 监听器
		watch: {},
		// 计算属性
		computed: {
			statusBarOpacityCom() {
				let that = this;
				let {
					scrollTop = 0
				} = that;
				if (scrollTop > 80) {
					return 1;
				} else {
					return scrollTop / 80;
				}
			},
			fxLvCom() {
				try {
					let lv = vk.getVuex("$user.userInfo.fx.lv");
					let level_rule = vk.getVuex('$user.mchInfo.fx.level_rule');
					let item = vk.pubfn.getListItem(level_rule, "lv", lv);
					console.log(item)
					return item.name;
				} catch (err) {
					return "异常";
				}
			},
			myVipCom() {
				let vip_level_rule = vk.getVuex('$user.mchInfo.vip_level_rule');
				let lv = vk.getVuex('$user.userInfo.vip_lv');
				let item = vk.pubfn.getListItem(vip_level_rule, "lv", lv) || {};
				return item.name;
			}
		}
	};
</script>
<style>
	page {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
		overflow: scroll;
	}
</style>
<style lang="less" scoped>
	.fixed-top-content {
		width: 100%;
		height: calc(var(--status-bar-height) + 380rpx);
		background-size: 100% 100%;
		z-index: 99;
	}

	page {
		width: 100%;
		height: 100%;
	}

	.level-item-size {
		width: 110rpx;
		height: 34rpx;
		background: linear-gradient(180deg, #333333 0%, #330202 100%);
		font-size: 22rpx;
		color: #ffdab1;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
		border-radius: 17rpx;
	}

	.next-icon-size {
		width: 22rpx;
		height: 30rpx;
	}

	/deep/.u-drawer-bottom {
		background-color: rgba(255, 255, 255, 0) !important;
	}

	.logout_tips_con {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 18rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.confirm_logout_btn {
		color: #1d86ff;
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 18rpx;
		background-color: #fff;
	}

	/deep/ button::after {
		border: none !important;
	}

	/deep/.u-drawer-bottom {
		background-color: rgba(255, 255, 255, 0) !important;
	}
</style>
